<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>MyHome</title>


    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!--
        Thymeleaf路径制作案例:<link th:href="@{/bootstrap450/css/bootstrap.css}" rel="stylesheet">
    -->
    <!-- css -->
    <link th:href="@{/qianduanStaticResource/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/qianduanStaticResource/css/fancybox/jquery.fancybox.css}" rel="stylesheet">
    <link th:href="@{/qianduanStaticResource/css/flexslider.css}" rel="stylesheet"/>
    <link th:href="@{/qianduanStaticResource/css/style.css}" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
<div id="wrapper" class="home-page">
    <div class="topbar">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.00 - 18.00. Sunday CLOSED</span>
                    <p class="pull-right"><i class="fa fa-phone"></i>Tel No. (+001) 123-456-789</p>
                </div>
            </div>
        </div>
    </div>
    <!-- start header -->
    <header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>


                    <a class="navbar-brand" href="index.html"><img th:src="@{/qianduanStaticResource/img/logo.png}"
                                                                   alt="logo"/></a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">关于我们 <b
                                    class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a th:href="@{/a}">公司</a></li>
                                <li><a href="#">我们的团队</a></li>
                                <li><a href="#">新闻</a></li>
                                <li><a href="#">邀请</a></li>
                            </ul>
                        </li>
                        <li><a href="services.html">服务</a></li>
                        <li><a href="projects.html">项目</a></li>
                        <li><a href="pricing.html">价钱</a></li>
                        <li><a th:href="@{/goLogin}" methods="post">登录</a></li>

                    </ul>
                </div>
            </div>
            </div>
    </header>
    <!-- end header -->
    <section id="banner">

        <!-- Slider -->
        <div id="main-slider" class="flexslider">
            <ul class="slides">
                <li>
                    <img th:src="@{/qianduanStaticResource/img/slides/2.jpg}" alt=""/>
                    <div class="flex-caption">
                        <h3>门控别墅</h3>

                    </div>
                </li>
                <li>
                    <img th:src="@{/qianduanStaticResource/img/slides/1.jpg}" alt=""/>
                    <div class="flex-caption">
                        <h3>时尚家居</h3>

                    </div>
                </li>
            </ul>
        </div>
        <!-- end slider -->

    </section>


    <section id="content">
        <div class="container">
            <div class="row">
                <div class="skill-home">
                    <div class="skill-home-solid clearfix">
                        <div class="col-md-3 col-sm-6 text-center">
                            <span class="icons c1"><i class="fa fa-home"></i></span>
                            <div class="box-area">
                                <h3>新项目</h3>
                                <p>Lorem ipsum食用sitamet，追求肝脏回扣。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p></div>
                        </div>
                        <div class="col-md-3 col-sm-6 text-center">
                            <span class="icons c2"><i class="fa fa-rocket"></i></span>
                            <div class="box-area">
                                <h3>准备移动</h3>
                                <p>Lorem ipsum食用sitamet，追求肝脏回扣。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p></div>
                        </div>
                        <div class="col-md-3 col-sm-6 text-center">
                            <span class="icons c3"><i class="fa fa-trophy"></i></span>
                            <div class="box-area">
                                <h3>商业广告</h3>
                                <p>Lorem ipsum食用sitamet，追求肝脏回扣。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p></div>
                        </div>
                        <div class="col-md-3 col-sm-6 text-center">
                            <span class="icons c4"><i class="fa fa-star"></i></span>
                            <div class="box-area">
                                <h3>门控项目</h3>
                                <p>Lorem ipsum食用sitamet，追求肝脏回扣。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <section class="section-padding noTopMrgn">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title text-center">
                            <h2><span class="coloured">趋向</span> 专案</h2>
                            <p>教室里还不知道怎么这样。直到护理员工malesuada Pellentesque <br>此时，是临床蛋白质的大门。现场接收燃气温度需要创新的周末。</p>
                        </div>
                    </div>
                </div>
                <div class="row service-v1 margin-bottom-40">
                    <div class="col-sm-3 md-margin-bottom-40">
                        <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img1.jpg}" alt="">
                        <h3>公寓式</h3>
                        <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                    </div>
                    <div class="col-sm-3 md-margin-bottom-40">
                        <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img2.jpg}" alt="">
                        <h3>豪华别墅</h3>
                        <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                    </div>
                    <div class="col-sm-3 md-margin-bottom-40">
                        <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img3.jpg}" alt="">
                        <h3>门控项目</h3>
                        <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                    </div>
                    <div class="col-sm-3 md-margin-bottom-40">
                        <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img4.jpg}" alt="">
                        <h3>公寓式</h3>
                        <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                    </div>
                </div>
            </div>
        </section>


    </section>

    <section class="section-padding gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-center">
                        <h2><span class="coloured">Recent</span> Properties</h2>
                        <p>教室里还不知道怎么这样。直到护理员工马累苏达·佩伦特式 <br>此时，是临床蛋白质的大门。现场接收燃气温度需要创新的周末。</p>
                    </div>
                </div>
            </div>
            <div class="row service-v1 margin-bottom-40">
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img5.jpg}" alt="">
                    <h3>公寓式</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img6.jpg}" alt="">
                    <h3>豪华别墅</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img7.jpg}" alt="">
                    <h3>Gated Projects</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
            </div>
            <div class="row service-v1 margin-bottom-40">
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img8.jpg}" alt="">
                    <h3>Apartments</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img9.jpg}" alt="">
                    <h3>luxury Villas</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
                <div class="col-sm-4 md-margin-bottom-40">
                    <img class="img-responsive" th:src="@{/qianduanStaticResource/img/img10.jpg}" alt="">
                    <h3>Gated Projects</h3>
                    <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                </div>
            </div>
        </div>
    </section>
    <section class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-center">
                        <h2><span class="coloured">About</span> Our Company</h2>
                        <p>Lorem ipsum dolor坐下，一直保持着安静的状态。而且，由于某些原因而引起的痛苦，变得非常重要，以至于无法自拔</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="about-text">
                        <p>网格是一个响应式多用途模板。 Lorem ipsum dolor坐下，一直保持着安静的状态。教室里还不知道怎么这样。直到照顾员工libero。 id orci pellentesque在他的蛋白质的大门。现场接收燃气温度需要创新的周末.</p>

                        <ul class="withArrow">
                            <li><span class="fa fa-angle-right"></span> Lorem ipsum胡萝卜</li>
                            <li><span class="fa fa-angle-right"></span> 加强监控程序</li>
                            <li><span class="fa fa-angle-right"></span> 教室不知道怎么办</li>
                            <li><span class="fa fa-angle-right"></span> 直到照顾员工libero。</li>
                        </ul>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="about-image">
                        <img th:src="@{/qianduanStaticResource/img/about.jpg}" alt="About Images">
                    </div>
                </div>
            </div>
        </div>
    </section>


    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <div class="widget">
                        <h5 class="widgetheading">我们的联系方式</h5>
                        <address>
                            <strong>MyHome Inc</strong><br>
                            JC Main Road，靠近Silnile塔<br> Pin-21542纽约，美国.
                        </address>
                        <p>
                            <i class="icon-phone"></i> (123) 456-789 - 1255-12584 <br>
                            <i class="icon-envelope-alt"></i> email@domainname.com
                        </p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="widget">
                        <h5 class="widgetheading">Quick Links</h5>
                        <ul class="link-list">
                            <li><a href="#">Latest Events</a></li>
                            <li><a href="#">Terms and conditions</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Career</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="widget">
                        <h5 class="widgetheading">Latest posts</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="widget">
                        <h5 class="widgetheading">Recent News</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="sub-footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="copyright">
                            <p>
                                Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
                                                                                          href="http://www.mycodes.net/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <ul class="social-network">
                            <li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Google plus"><i
                                    class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script th:src="@{/qianduanStaticResource/js/jquery.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.easing.1.3.js}"></script>
<script th:src="@{/qianduanStaticResource/js/bootstrap.min.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.fancybox.pack.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.fancybox-media.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.flexslider.js}"></script>
<script th:src="@{/qianduanStaticResource/js/animate.js}"></script>
<!-- Vendor Scripts -->
<script th:src="@{/qianduanStaticResource/js/modernizr.custom.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.isotope.min.js}"></script>
<script th:src="@{/qianduanStaticResource/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{/qianduanStaticResource/js/animate.js}"></script>
<script th:src="@{/qianduanStaticResource/js/custom.js}"></script>
</body>
</html>